/**
 * 页面外层卡片容器
 */
import React from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import connectFn from '@/utils/connectFn';
import { WithButtonAuth } from '@/components/CreateTable/TableTool';

import './index.less';

interface CrateCardProps {
  subTitle?: any[];
  location?: { pathname: string };
  defaultTitle?: string; // 自定义的标题
  renderTitleNode?: Function; // 自定义的左侧标题节点方法
  addAuth?: string | boolean; // 新增权限
  backAuth?: string | boolean; // 返回权限
  exportAuth?: string; // 导出权限
  exportLoading?: boolean; // 导出loading ？？？
  isMobile?: boolean;
  routes?: any;
  showTitle?: boolean;
}

@connectFn([{ routing: ['location'], global: ['isMobile'], userLogin: ['routes'] }])
class CreateCard extends React.PureComponent<CrateCardProps> {
  /**
   * 遍历获取routes中的name
   * @param routes
   * @param arr
   */
  public getFormatTitleStr = (routes: any[], arr: string[]) => {
    const { pathname } = window.location;
    routes.forEach((item: any) => {
      if (pathname.includes(item.path)) {
        arr.push(item.name);
      }
      if (item.routes && item.routes.length) {
        this.getFormatTitleStr(item.routes, arr);
      }
    });
  };

  // 获取card标题
  public getCardTitle = () => {
    const { location, defaultTitle, routes, subTitle } = this.props;
    let title = '';
    let id = 'menu';
    const routeArr: string[] = [];
    this.getFormatTitleStr(routes, routeArr);

    // 如果有默认的标题，渲染默认标题
    if (defaultTitle) {
      title = defaultTitle;

      // 根据routes获取对应国际化的数据
    } else if (location && location.hasOwnProperty('pathname')) {
      routeArr.forEach((key: string, index: number) => {
        id += `.${key}`;
        title += `${index !== 0 ? ' / ' : ''}${formatMessage({ id })}`;
      });

      // 针对于需要拼接详情等情况处理
      if (subTitle && subTitle.length) {
        title += ` / ${subTitle.join(' / ')}`;
      }
    }

    return (
      <div className="st-card-title">
        <span>{title}</span>
      </div>
    );
  };

  // 获取card右侧附加的元素
  public getCardExtra() {
    const { addAuth, backAuth, exportAuth, exportLoading = false } = this.props;
    return (
      <React.Fragment>
        <WithButtonAuth auth={addAuth} type="primary" size="small" onClick={this.handleAdd}>
          新增
        </WithButtonAuth>
        <WithButtonAuth auth={backAuth} size="small" onClick={this.handleGoBack}>
          返回
        </WithButtonAuth>
        <WithButtonAuth
          style={{ marginLeft: '10px' }}
          auth={exportAuth}
          type="primary"
          size="small"
          onClick={this.handleExport}
          loading={exportLoading}
        >
          导出Excel
        </WithButtonAuth>
      </React.Fragment>
    );
  }

  // 点击返回
  public handleGoBack = () => {};

  // 点击新增
  public handleAdd = () => {};

  // 点击导出
  public handleExport = () => {};

  render() {
    const { children, showTitle = true } = this.props;
    return (
      <div className="st-card">
        {showTitle && this.getCardTitle()}
        {children}
      </div>
    );
    // return (
    //   <Card className="st-card"
    //     title={this.getCardTitle()}
    //     // extra={this.getCardExtra()}
    //   >
    //     {children}
    //   </Card>
    // );
  }
}

export default CreateCard;
